<template>
  <div class="bigbox">
    <div class="title">
      <div class="title1">
        <div class="shuju">数据统计</div>
          <div style="line-height:51px;margin-left:338px">
            <el-select
            v-model="value"
            placeholder="线体"
            clearable
            class="xiantio"
            style="width:105px;border:none;"
            @change="getcount"
          >
            <el-option
              v-for="item in xiantioptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="value1"
            placeholder="版型"
            style="width:105px;border:none"
            clearable
            class="xiantio1"
            @change="getcount"
          >
            <el-option
              v-for="item in banxingoptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
          </div>
        <div style="line-height:51px">
          <el-date-picker
              v-model="dateTime"
              type="monthrange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM"
              style="border:none"
              format="yyyy-MM"
              :picker-options="pickerOptions0"
              @change="change1">
          </el-date-picker>
            <!-- <el-date-picker
            v-model="starDate"
            type="month"
            placeholder="选择月"
            class="xiantio2"
            style="width:130px"
            @change="getcount"
          >
          </el-date-picker> -->
        </div>
          <!-- <el-select
            v-model="value2"
            placeholder="请选择"
            style="width:100px ; border:none"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        <!-- </div> -->
      </div>
      <div class="title2">
        <div class="smbox">
          <div class="tuimg">
            <img src="../../assets/image/one.png" alt="" />
          </div>
          <div class="neitong">
            <p>{{ hqcount.lineCount}}</p>
            <span>投产总量（MW）</span>
          </div>
        </div>
        <div class="smbox">
          <div class="tuimg">
            <img src="../../assets/image/two.png" alt="" />
          </div>
          <div class="neitong">
            <p>{{ hqcount.deliverCount }}</p>
            <span>发货总量（MW）</span>
          </div>
        </div>
        <div class="smbox">
          <div class="tuimg">
            <img src="../../assets/image/three.png" alt="" />
          </div>
          <div class="neitong">
            <p>{{ hqcount.changeCount }}</p>
            <span>变更频率（MW）</span>
          </div>
        </div>
        <div class="smbox">
          <div class="tuimg">
            <img src="../../assets/image/four.png" alt="" />
          </div>
          <div class="neitong">
            <p>{{ hqcount.stayCount }}</p>
            <span>待投产订单总量（MW）</span>
          </div>
        </div>
        <div class="smbox">
          <div class="tuimg">
            <img src="../../assets/image/five.png" alt="" />
          </div>
          <div class="neitong">
            <p>
              {{
                ((Number(hqcount.qualifiedCount == null ? 0 : hqcount.qualifiedCount) /Number(hqcount.orderCount ==null? 0: (hqcount.orderCount  == '0' ? 1: hqcount.orderCount))) * 100).toFixed() + "%"
              }}
            </p>
            <span>订单合格率</span>
          </div>
        </div>
        <div class="smbox" style="border:none">
          <div class="tuimg">
            <img src="../../assets/image/six.png" alt="" />
          </div>
          <div class="neitong">
            <p>
              {{
                ((Number(hqcount.actualCount == null ? 0 : hqcount.actualCount) /Number(hqcount.allCapacity ==null? 0: (hqcount.allCapacity  == '0' ? 1: hqcount.allCapacity))) * 100).toFixed() + "%"
              }}
              <!-- {{
                ((hqcount.actualCount / hqcount.allCapacity) * 100).toFixed() +
                  "%"
              }} -->
            </p>
            <span>产线计划完成率</span>
          </div>
        </div>
      </div>
    </div>


    <div class="title">
      <div style="line-height:51px;float: right;">
      <span>单位:兆瓦</span>
          <el-date-picker
              v-model="dateTime1"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              style="border:none"
              format="yyyy-MM-dd"
              @change="search1">
          </el-date-picker>
        </div>
      <div class="title2">
        <div class="smbox1">
          <div class="tuimg">
            <img src="../../assets/image/four.png" alt="" />
          </div>
          <div class="neitong">
            <p>{{ totalCount}}</p>
            <span>总库存量</span>
          </div>
        </div>
        <div class="smbox1">
          <div class="tuimg">
            <img src="../../assets/image/six.png" alt="" />
          </div>
          <div class="neitong">
            <p>{{ surplusCount }}</p>
            <span>总剩余量(未领取)</span>
          </div>
        </div>
        <div class="smbox1">
          <div class="tuimg">
            <img src="../../assets/image/five.png" alt="" />
          </div>
          <div class="neitong">
            <p>{{unpaidCount }}</p>
            <span>未付款量</span>
          </div>
        </div>
        <div class="smbox1">
          <div class="tuimg">
            <img src="../../assets/image/two.png" alt="" />
          </div>
          <div class="neitong">
            <p>{{ advanceCount }}</p>
            <span>已预付量</span>
          </div>
        </div>
        <div class="smbox1">
          <div class="tuimg">
            <img src="../../assets/image/one.png" alt="" />
          </div>
          <div class="neitong">
            <p>
              {{deliverCount}}
            </p>
            <span>累计发货量</span>
          </div>
        </div>
      </div>
    </div>


    <!-- 产线排单预警 -->
    <div class="twobox">
      <div class="conten">
        <div class="ctit">
          产线排单预警
        </div>
        <div style="padding:0 20px">
          <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            >>
            <el-table-column
              label="序号"
              type="index"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="lineName"
              label="产线名称"
              align="center"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="productionDate"
              label="排产日期"
              align="center"
              width="250"
            >
            </el-table-column>
            <el-table-column prop="dayNum" align="center" label="生产天数">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="conten1">
        <div class="pinpai">
          品牌综合统计
          <el-date-picker
            v-model="time"
            type="month"
            placeholder="选择日期"
            class="xiantio3"
             value-format="yyyy-MM"
            style="position:relative;top:0; left:35%;width:120px"
            @change="getbrand"
          >
          </el-date-picker>
        </div>

        <div
          style="width:100%;height:100%;padding:0 0 0 24px"
          ref="wocao"
          class="tuone"
        ></div>
      </div>
      <div class="conten2">
        <div class="pinpai">
          组件综合统计
          <el-date-picker
            v-model="times"
            type="month"
            placeholder="选择日期"
            class="xiantio4"
             value-format="yyyy-MM"
            @change="getplate"
            style="position:relative;top:0; left:35%;width:120px"
          >
          </el-date-picker>
        </div>
        <div
          style="width:100%;height:100%;padding:0 0 0 24px"
          ref="wocao1"
          class="tuone"
        ></div>
      </div>
    </div>
    <!-- 3 -->
    <div class="threebox">
      <!-- 3_1 -->
      <div class="footbox">
        <div style="display:flex;justify-content:space-between">
          <div class="fahuo">投产分类</div>
          <div class="riqi">
                <el-date-picker v-model="getList.scheduleStartDate" type="date" style="width:140px" value-format="yyyy-MM-dd" class="xiantio4" placeholder="选择日期" @change="search2" ></el-date-picker>
                <el-date-picker  v-model="getList.scheduleEndDate" style="width:140px" type="date" class="xiantio4" value-format="yyyy-MM-dd" placeholder="选择日期" @change="search3"></el-date-picker>
                <el-select v-model="chanian" class="xiantio4" placeholder="产线" style="width:80px;border:none;margin-left:-30px" @change="getline">
                  <el-option
                    v-for="item in options3"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
          </div>
        </div>
        <!-- 3_2 -->
        <div class="gokan">
              <div
                class="gobox"
                v-for="(item, index) in aName"
                :key="item.index"
              >
                <div :class="sbox[index]"></div>
                <div class="fonta">{{ item.lineName }}</div>
              </div>
        </div>
         <div style="width:500px;height:90%;" ref="zhutu"></div>
      </div>
      <!-- 发货 -->
      <div class="footbox1">
        <div style="display:flex;justify-content:space-between">
          <div class="fahuo">发货分类</div>
          <div class="riqi">
                <el-date-picker
                v-model="getList1.scheduleStartDate"
                type="date"
                style="width:140px"
                 class="xiantio4"
                 value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="getdeliver"
              >
              </el-date-picker>
              <el-date-picker
                v-model="getList1.scheduleEndDate"
                style="width:140px"
                 class="xiantio4"
                 value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change="getdeliver"
              >
              </el-date-picker>
              <el-select
                v-model="chanian1"
                 class="xiantio4"
                placeholder="产线"
                style="width:80px;border:none;margin-left:-30px"
                @change="getdeliver"
              >
                <el-option
                  v-for="item in options4"
                   class="xiantio4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
          </div>
        </div>
        <div class="gokan">
              <div
                class="gobox"
                v-for="(item, index) in bName"
                :key="item.index"
              >
                <div :class="sbox[index]"></div>
                <div class="fonta">{{ item.lineName }}</div>
              </div>
            </div>
            <div style="width:500px;height:90%;" ref="zhutu1"></div>
      </div>
      <div class="footbox2">
        <div style="display:flex;justify-content:space-between">
          <div class="fahuo">入库分类</div>
          <div class="riqi">
                         <el-date-picker
                v-model="getList2.scheduleStartDate"
                type="date"
                style="width:140px"
                 class="xiantio4"
                 value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="getwarehousing"
              >
              </el-date-picker>
              <el-date-picker
                v-model="getList2.scheduleEndDate"
                style="width:140px"
                 class="xiantio4"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="getwarehousing"
              >
              </el-date-picker>
              <el-select
                v-model="chanian2"
                placeholder="产线"
                 class="xiantio4"
                style="width:80px;border:none;margin-left:-30px"
                @change="getwarehousing"
              >
                <el-option
                  v-for="item in options5"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
          </div>
        </div>
        <div class="gokan">
              <div
                class="gobox"
                v-for="(item, index) in zName"
                :key="item.index"
              >
                <div :class="sbox[index]"></div>
                <div class="fonta">{{ item.lineName }}</div>
              </div>
          </div>
           <div style="width:500px;height:90%;" ref="zhutu2"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getyujing,
  getbrand,
  getplate,
  getline,
  getdeliver,
  getcount,
  getwarehousing,
  getbanxing,
  getlinelst
} from "@/api/assessmentDetails/assessmentDetails";
import { getData,} from "@/api/systemSettings/receive.js";
export default {
  name: "index",
  data() {
    return {
      pickerOptions0: {
         disabledDate: (time) => {
         	  const date = new Date()
         	  const year = date.getFullYear()
          	  let month = date.getMonth() + 1
       		  if (month >= 1 && month <= 9) {
            	month = '0' + month
          	  }
          	  const currentdate = year.toString() + month.toString()
              const timeyear = time.getFullYear()
              let timemonth = time.getMonth() + 1
              if (timemonth >= 1 && timemonth <= 9) {
                 timemonth = '0' + timemonth
               }
              const timedate = timeyear.toString() + timemonth.toString()
              // 当月
              // return timedate < currentdate || currentdate < timedate
              // 当月及以后
              // return timedate < currentdate
              // 当月以前
              return timedate >= currentdate
             }
        },
      value: "",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      startTime: new Date(),
      endTime: new Date(new Date().getTime()+2592000000),  //3600 * 1000 * 24 * 30
      startTimes: new Date(),
      endTimes:new Date(new Date().getTime()+2592000000),
      // 
       kaishi: new Date(),
      jieshu: new Date(new Date().getTime()+2592000000),
      // 
      // starDate: new Date(),
      chanian: "1",
      chanian1: "1",
      chanian2: "1",
      options: [],
      sbox: ["a1", "a2", "a3", "a4"],
      banxingoptions: [],
      xiantioptions: [],
      timess: "",
      options3: [
        {
          label: "产线",
          value: "1"
        },
        {
          label: "部门",
          value: "2"
        },
        {
          label: "版型",
          value: "3"
        }
      ],
      options4: [
        {
          label: "产线",
          value: "1"
        },
        {
          label: "部门",
          value: "2"
        },
        {
          label: "版型",
          value: "3"
        }
      ],
      options5: [
        {
          label: "产线",
          value: "1"
        },
        {
          label: "部门",
          value: "2"
        },
        {
          label: "版型",
          value: "3"
        }
      ],
      time:'',
      times:'',
      abab: [],
      acac: [],
      babab: [],
      bacac: [],
      zName: [],
      babab1: [],
      bacac1: [],
      chanxian: [
        {
          name: "A产线"
        },
        {
          name: "B产线"
        },
        {
          name: "C产线"
        },
        {
          name: "D产线"
        }
      ],
      brandoptions: [],
      plateoptions: [],
      aName: [],
      bName: [],
      aval: [],
      hqcount: "",
      tableData: [],
      dateTime:'',
      advanceCount:'',
      deliverCount:'',
      paymentCount:'',
      surplusCount:'',
      totalCount:'',
      unpaidCount:'',
      dateTime1:[],
      aa:'',
      params1:{
         startDate:'',
          endDate:'',
      },
      getList: {
        scheduleStartDate: this.fun(
          Date.parse(new Date()) +
            ((7 - new Date(Date.parse(new Date())).getDay()) * 24 * 60 * 60 * 1000 - 518400000)), 
        scheduleEndDate: this.fun(Date.parse(new Date())), 
      },
      getList1: {
        scheduleStartDate: this.fun(
          Date.parse(new Date()) +
            ((7 - new Date(Date.parse(new Date())).getDay()) * 24 * 60 * 60 * 1000 - 518400000)), 
        scheduleEndDate: this.fun(Date.parse(new Date())), 
      },
      getList2: {
        scheduleStartDate: this.fun(
          Date.parse(new Date()) +
            ((7 - new Date(Date.parse(new Date())).getDay()) * 24 * 60 * 60 * 1000 - 518400000)), 
        scheduleEndDate: this.fun(Date.parse(new Date())), 
      },
    };
  },
  created() {
    // (this.value = "线体"), (this.value1 = "版型");
    this.value2 = "2022-02";
    this.value3 = "产线";
    this.value4 = "产线";
    this.value5 = "产线";
    this.value6 = "";
    this.getyujing();
    this.getbrand();
    this.getplate();
    this.getline();
    this.getdeliver();
    this.getcount();
    this.getwarehousing();
    this.getbanxing();
    this.getlinelst();
    this.getData()
  },
  methods: {
     fun (unixtimestamp) {
      const dt = new Date(unixtimestamp)
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
      return `${y}-${m}-${d}`
    },
    search3(val){
      this.$nextTick(()=>{
        this.getList.scheduleEndDate = val
        this.getline()
      })
    },
    search2(val){
      this.$nextTick(()=>{
        this.getList.scheduleStartDate = val
        this.getline()
      })
    },
    search1(val){
      if(val == null){
              this.params1.startDate = ''
              this.params1.endDate = ''
              this.getData()
          }else {
            this.params1.startDate = this.dateTime1[0]
            this.params1.endDate = this.dateTime1[1]
            this.getData()
          }
        },
    // 统计
        getData(){
            getData(this.params1).then((res)=>{
                if(res.code == 200){
                    // console.log(res);
                    this.advanceCount = res.data.advanceCount
                    this.deliverCount = res.data.deliverCount
                    this.paymentCount = res.data.paymentCount
                    this.surplusCount = res.data.surplusCount
                    this.totalCount = res.data.totalCount
                    this.unpaidCount = res.data.unpaidCount
                }
            })
        },
    change1(){
      this.getcount()
    },
    getbanxing() {
      let data = {
        dictType: "sys_shape"
      };
      getbanxing(data).then(res => {
        this.banxingoptions = res.rows;
      });
    },
    getlinelst() {
      getlinelst().then(res => {
        console.log(res, "线体");
        this.xiantioptions = res.rows;
      });
    },
    getcount() {
      let data = {
        startDate:this.dateTime[0],
        endDate:this.dateTime[1],
        lineId: this.value,
        shape: this.value1
      };
      getcount(data).then(res => {
        if (res.code == 200) {
          this.hqcount = res.data;
        }
      });
    },
    
    getwarehousing() {
      //  let a = this.kaishi.getFullYear();
      // let b = this.kaishi.getMonth() + 1;
      // let ba = this.kaishi.getDate();
      // let v = this.jieshu.getFullYear();
      // let d = this.jieshu.getMonth() + 1;
      // let dv = this.jieshu.getDate();
      // console.log(a,b,v,d,'///////////////////////')
      let data = {
        // startTime: a +'-'+ ('0'+b).substr(-2)+'-'+('0'+ba).substr(-2),
        // endTime: v +'-'+ ('0'+d).substr(-2)+'-'+('0'+dv).substr(-2),
        startTime:this.getList2.scheduleStartDate,
        endTime:this.getList2.scheduleEndDate,
        type: this.chanian2
      };
      this.babab1 = [];
      this.bacac1 = [];
      getwarehousing(data).then(res => {
        if (res.code == 200) {
          this.zName = res.rows;
        }
        for (var i = 0; i < this.zName.length; i++) {
          this.babab1.push(this.zName[i].lineName);
        }
        for (var i = 0; i < this.zName.length; i++) {
          this.bacac1.push(this.zName[i].generateCount);
        }
        this.gettuhah2();
         this.charts.clear();
      });
    },
    getdeliver() {
      // let a = this.startTimes.getFullYear();
      // let b = this.startTimes.getMonth() + 1;
      // let ba = this.startTimes.getDate();
      // let v = this.endTimes.getFullYear();
      // let d = this.endTimes.getMonth() + 1;
      // let dv = this.endTimes.getDate();
      // console.log(a,b,v,d,'///////////////////////')
      let data = {
        // startTime: a +'-'+ ('0'+b).substr(-2)+'-'+('0'+ba).substr(-2),
        // endTime: v +'-'+ ('0'+d).substr(-2)+'-'+('0'+dv).substr(-2),
        startTime:this.getList1.scheduleStartDate,
        endTime:this.getList1.scheduleEndDate,
        type: this.chanian1
      };
      this.babab = [];
      this.bacac = [];
      getdeliver(data).then(res => {
        if (res.code == 200) {
          this.bName = res.rows;
        }
        for (var i = 0; i < this.bName.length; i++) {
          this.babab.push(this.bName[i].lineName);
        }
        for (var i = 0; i < this.bName.length; i++) {
          this.bacac.push(this.bName[i].generateCount);
            console.log(this.bacac)
        }
        this.gettuhah1();
      });
    },
    getline() {
      // let a = this.startTime.getFullYear();
      // let b = this.startTime.getMonth() + 1;
      // let bv = this.startTime.getDate()
      // // console.log(('0'+bv).substr(-2))
      // let v = this.endTime.getFullYear();
      // let d = this.endTime.getMonth() + 1;
      // let bc = this.endTime.getDate()
      // this.getList.scheduleEndDate = this.fun(Date.parse(new Date()))
      // this.getList.scheduleStartDate = this.fun(
      // Date.parse(new Date()) +
      //   ((7 - new Date(Date.parse(new Date())).getDay()) * 24 * 60 * 60 * 1000 -
      //     604800000))
      let data = {
        // startTime:a +'-'+ ('0'+b).substr(-2)+'-'+('0'+bv).substr(-2),
        // endTime: v +'-'+ ('0'+d).substr(-2)+'-'+('0'+bc).substr(-2),
        startTime:this.getList.scheduleStartDate,
        endTime:this.getList.scheduleEndDate,
        type: this.chanian
      };
      this.abab = [];
      this.acac = [];
      getline(data).then(res => {
        if (res.code == 200) {
          this.aName = res.rows;
        }
        for (var i = 0; i < this.aName.length; i++) {
          this.abab.push(this.aName[i].lineName);
        }
        for (var i = 0; i < this.aName.length; i++) {
          this.acac.push(this.aName[i].generateCount);
        }
        this.gettuhah();
      });
    },
    // 组件综合统计
    getplate() {
      // let c = this.times.getFullYear();
      // let d = this.times.getMonth() + 1;
      // let a = this.times.slice(',')
      // console.log(this.times,'dayayyaya')
      // let arr = []
      // for(let i=0 ;i<this.times.length ;i++ ){
      //     let a = this.times[i].getFullYear()
      //     let b = this.times[i].getMonth()+1
      //     arr.push(a+'-'+b ,)
      // }
      // console.log(arr,'asasasas')
      // let data = {
      //   time :arr
      // }
      // let data = {
      //   // searchData:c
      //   searchData: d > 10 ? c + "-" + d : c + "-" + "0" + d
      // };
      getplate({searchData:this.times}).then(res => {
        this.plateoptions = JSON.parse(
          JSON.stringify(res.rows).replace(/count/g, "value")
        );
        this.gettubiao1();
      });
    },
    // 品牌综合统计
    getbrand() {
      // let a = this.time.getFullYear();
      // let b = this.time.getMonth() + 1;
      // let data = {
      //   searchData: b > 10 ? a + "-" + b : a + "-" + "0" + b
      // };
      getbrand({
        searchData:this.time
      }).then(res => {
        this.brandoptions = JSON.parse(
          JSON.stringify(res.rows).replace(/count/g, "value")
        );
        this.gettubiao();
      });
    },
    // 产线单排预警
    getyujing() {
      getyujing().then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.tableData = res.rows;
        }
      });
    },
    // 颜色
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex)
      // console.log( (Date.parse(new Date(row.productionDate)))/(1000*3600*24),'日期啊')
      if (row.dayNum <= 15) {
        return "success-row";
      } else if (row.dayNum == null) {
        return "warning-row";
      }
      // if(row.dayNum < null){
      //   return 'success-row'
      // }else{
      //   return 'warning-row'
      // }
    },
    gettubiao() {
      let myChart = this.$echarts.init(this.$refs.wocao);
      myChart.setOption({
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        color: ["#2951FF", "#DFE5FF"],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: this.brandoptions,
            // [
            //   { value: 1048, name: "大恒能源" },
            //   { value: 735, name: "其他品牌" }
            // ],
            label: {
              normal: {
                show: true,
                formatter: "{d}%" //自定义显示格式(b:name, c:value, d:百分比)
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    // tu2
    gettubiao1() {
      let myChart1 = this.$echarts.init(this.$refs.wocao1);
      myChart1.setOption({
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        // color: ["#FFAE21", "#FFF3DE"],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: this.plateoptions,
            label: {
              normal: {
                show: true,
                formatter: "{d}%" //自定义显示格式(b:name, c:value, d:百分比)
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    // tu3
    gettuhah() {
      let wotu = this.$echarts.init(this.$refs.zhutu);
      wotu.setOption({
        xAxis: {
          type: "category",
          data: this.abab
        },
        yAxis: {
          type: "value"
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            data: this.acac,
            type: "bar",
            show: true, //开启显示
            position: "top", //在上方显示
            barWidth: 42,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 12
                  }
                },
                color: function(params) {
                  // 给出颜色组
                  var colorList = ["#5B7AFF", "#FFB22E", "#FF504E", "#F5843F"];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    },
    // tu4
    gettuhah1() {
      let wotu1 = this.$echarts.init(this.$refs.zhutu1);
      wotu1.setOption({
        xAxis: {
          type: "category",
          data: this.babab
        },
        yAxis: {
          type: "value"
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            data: this.bacac,
            type: "bar",
            barWidth: 42,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "black",
                    fontSize: 12
                  }
                },
                color: function(params) {
                  // 给出颜色组
                  var colorList = ["#5B7AFF", "#FFB22E", "#FF504E", "#F5843F"];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    },
    // tu5
    gettuhah2() {
      let wotu1 = this.$echarts.init(this.$refs.zhutu2);
      wotu1.setOption({
        xAxis: {
          type: "category",
          data: this.babab1
        },
        yAxis: {
          type: "value"
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        series: [
          {
            data: this.bacac1,
            type: "bar",
            barWidth: 42,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "black",
                    fontSize: 12
                  }
                },
                color: function(params) {
                  // 给出颜色组
                  var colorList = ["#5B7AFF", "#FFB22E", "#FF504E", "#F5843F"];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    }
  },
  mounted() {
    this.gettubiao();
    this.gettubiao1();
    this.gettuhah();
    this.gettuhah1();
    this.gettuhah2();
  }
};
</script>
<style scope lang="scss">
.bigbox .el-table .success-row {
  color: red !important;
}

.bigbox .el-table .warning-row {
  color: #34c934 !important;
}
.xiantio .el-input__inner {
  border: none;
}
.xiantio1 .el-input__inner {
  border: none;
}
.xiantio2 .el-input__inner {
  border: none;
}
.xiantio3 .el-input__inner {
  border: none;
}
.xiantio4 .el-input__inner {
  border: none;
}
.riqi .el-input__inner{
  border: none;
}
// i.el-select__caret {
//   /*很关键：将默认的select选择框样式清除*/
//   appearance: none;
//   -moz-appearance: none;
//   -webkit-appearance: none;
//   /*为下拉小箭头留出一点位置，避免被文字覆盖*/
//   padding-right: 14px;
//   /*自定义图片*/
//   background: url("../../assets/image/upup1.png") no-repeat scroll center
//     transparent;
//   /*自定义图片的大小*/
//   background-size: 9px 6px;
// }
// /*将小箭头的样式去去掉*/
// .bigbox .el-icon-arrow-up:before {
//   content: "";
// }
</style>
<style scoped lang="scss">
ul li {
  list-style: none;
}
.bigbox {
  width: 100%;
  height: 1300px;
  padding: 27px 24px;
  background-color: rgba(245, 246, 247, 1);
}
.title {
  width: 100%;
  height: 168px;
  background: #fff;
  margin-bottom: 20px;
}
.title1 {
  padding: 0 27px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.shuju {
  line-height: 50px;
  color: rgba(43, 43, 43, 100);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 700;
}
.title2 {
  width: 100%;
  height: 118px;
  padding: 20px 0;
  display: flex;
}
.title .smbox {
  width: 16.6%;
  height: 100%;
  display: flex;
  border-right: 1px solid #ccc;
}
.title .smbox .tuimg {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 25px;
}
.title .smbox .tuimg img {
  width: 100%;
  height: 100%;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 25px;
}
.title .smbox .neitong {
}
.title .smbox .neitong p {
  font-size: 32px;
  // margin-top: 5px;
  margin-bottom: -2px;
}
.title .smbox .neitong span {
  font-size: 14px;
  margin-left: 5px;
  color: rgba(154, 161, 175, 100);
}

.title .smbox1 {
  width: 19%;
  height: 100%;
  display: flex;
  border-right: 1px solid #ccc;
}
.title .smbox1 .tuimg {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 25px;
}
.title .smbox1 .tuimg img {
  width: 100%;
  height: 100%;
  margin-top: 5px;
  margin-left: 15px;
  margin-right: 25px;
}
.title .smbox1 .neitong p {
  font-size: 32px;
  // margin-top: 5px;
  margin-bottom: -2px;
}
.title .smbox1 .neitong span {
  font-size: 14px;
  margin-left: 5px;
  color: rgba(154, 161, 175, 100);
}
.twobox {
  display: flex;
  width: 100%;
  height: 360px;
  margin-bottom: 24px;
}
.conten {
  width: 48%;
  height: 360px;
  background: #fff;
  margin-right: 1%;
}
.conten .ctit {
  padding: 24px;
  font-weight: 700;
}
.conten1 {
  width: 25%;
  height: 360px;
  margin-right: 1%;
  background: #fff;
}
.conten1 .pinpai {
  padding: 24px 0 4px 24px;
  font-weight: 700;
}
.conten2 {
  width: 25%;
  height: 360px;
  background: #fff;
}
.conten2 .pinpai {
  padding: 24px 0 4px 24px;
  font-weight: 700;
}
.threebox {
  width: 100%;
  height: 400px;
  display: flex;
}
.footbox {
  width: 32.6%;
  height: 100%;
  background: #fff;
  margin-right: 1%;
}
.footbox .fff {
  width: 104px;
  height: 60px;
  font-weight: 700;
  text-align:center;line-height:60px
}
.footbox1 {
  width: 32.6%;
  height: 100%;
  background: #fff;
  margin-right: 1%;
}
.footbox1 .fff {
  width: 104px;
  padding: 24px;
  font-weight: 700;
}
.footbox2 {
  width: 32.6%;
  height: 100%;
  background: #fff;
}
.footbox2 .fff {
  padding: 24px;
  width: 104px;
  font-weight: 700;
}
.gokan {
    margin-left: 100px;
     width: 70%;
     overflow-x: scroll;
    display: -webkit-box;
    display: -ms-flexbox;
    // display: flex;
    // position: absolute;
    // left: 146px;
}
.gokan .gobox {
  display: flex;
  margin-right: 15px;
}
.gokan .gobox .sbox {
  // width: 10px;
  // height: 7px;
  // line-height: 7px;
  // border-radius: 2px;
  // // background-color: rgba(67, 47, 255, 1);
  // margin-top: 5px;
  // margin-right: 4px;
}
.gokan .gobox .fonta {
  font-size: 10px;
  width: 100%;
  // width: 25px;
}
.gokan1 {
    margin-right: 34px;
    width: 321px;
    overflow-x: scroll;
    display: -webkit-box;
    display: -ms-flexbox;
    // display: flex;
    // position: absolute;
    // left: 688px;
}
.gokan1 .gobox {
  display: flex;
  margin-right: 15px;
}
.gokan1 .gobox .sbox {
  // width: 10px;
  // height: 7px;
  // line-height: 7px;
  // border-radius: 2px;
  // // background-color: rgba(67, 47, 255, 1);
  // margin-top: 5px;
  // margin-right: 4px;
}
.gokan1 .gobox .fonta {
  font-size: 10px;
  width: 100%;
}
.gokan2 {
    margin-right: 34px;
    width: 321px;
    overflow-x: scroll;
    display: -webkit-box;
    display: -ms-flexbox;
    // display: flex;
    // position: absolute;
    // left: 1234px;
}
.gokan2 .gobox {
  display: flex;
  margin-right: 15px;
}
.gokan2 .gobox .sbox {
  // width: 10px;
  // height: 7px;
  // line-height: 7px;
  // border-radius: 2px;
  // // background-color: rgba(67, 47, 255, 1);
  // margin-top: 5px;
  // margin-right: 4px;
}
.gokan2 .gobox .fonta {
  font-size: 10px;
  width: 100%;
}
.a1 {
  width: 10px;
  height: 7px;
  line-height: 7px;
  border-radius: 2px;
  background-color: rgba(67, 47, 255, 1);
  margin-top: 5px;
  margin-right: 4px;
}
.a2 {
  width: 10px;
  height: 7px;
  line-height: 7px;
  border-radius: 2px;
  // background-color: rgba(67, 47, 255, 1);
  margin-top: 5px;
  margin-right: 4px;
  background: #ffb22e;
}
.a3 {
  width: 10px;
  height: 7px;
  line-height: 7px;
  border-radius: 2px;
  // background-color: rgba(67, 47, 255, 1);
  margin-top: 5px;
  margin-right: 4px;
  background: #ff504e;
}
.a4 {
  width: 10px;
  height: 7px;
  line-height: 7px;
  border-radius: 2px;
  // background-color: rgba(67, 47, 255, 1);
  margin-top: 5px;
  margin-right: 4px;
  background: #f5843f;
}

.fahuo{
  font-weight: 700;
  margin-top:24px;
  margin-left:20px
}
.riqi{
  margin-top:20px
}
</style>
